<template>
	<view class="login">
		<view class="login-main">
			<h3 class="">hello</h3>
			<view class="welcome">欢迎来到酷学</view>

			<view class="login-box">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType" @clickItem="onClickItem" />
				<view class="content">
					<view v-if="current === 0" class="content-text">
						<uni-forms :modelValue="formData" :rules="rules" ref="form">
							<uni-forms-item label="账号" name="username">
								<uni-easyinput type="text" v-model="formData.username" placeholder="请输入账号" />
							</uni-forms-item>
							<uni-forms-item label="密码" name="password">
								<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
							</uni-forms-item>
						</uni-forms>
						<button @click="submit" class="login-button">登录</button>
					</view>
					<view v-if="current === 1" class="content-text">
						<uni-forms :modelValue="formData" :rules="rules" ref="form">
							<uni-forms-item label="账号" name="username">
								<uni-easyinput type="text" v-model="formData.username" placeholder="请输入账号" />
							</uni-forms-item>
							<uni-forms-item label="密码" name="password">
								<uni-easyinput type="text" v-model="formData.password" placeholder="请输入密码" />
							</uni-forms-item>
						</uni-forms>
						<button @click="submit" class="login-button">登录</button>
					</view>
					<view v-if="current === 2" class="content-text">
						<button @click="submit" class="login-button">点击使用EDU统一登录</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { postLogin, getInfo } from '@/services/user.js';
export default {
	components: {},
	data() {
		return {
			items: ['个人登录', '机构登录', '统一登陆'],
			styles: [
				{
					value: 'button',
					text: '按钮',
					checked: true
				},
				{
					value: 'text',
					text: '文字'
				}
			],
			formData: {
				username: '',
				password: ''
			},
			current: 0,
			userType: '02',
			styleType: 'button',
			rules: {
				username: {
					rules: [
						{
							required: true,
							errorMessage: '请输入账号'
						}
					],
					validateTrigger: 'submit'
				},
				password: {
					rules: [
						{
							required: true,
							errorMessage: '请输入密码'
						}
					],
					validateTrigger: 'submit'
				}
			}
		};
	},
	watch: {
		current(newval, oldval) {
			this.formData.password = '';
			this.formData.username = '';
			if (newval == 0) {
				this.userType = '02';
			} else {
				this.userType = '01';
			}
		}
	},
	methods: {
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
			}
		},

		// 获取登录后跳转的链接
		async getPath() {
			// 获取用户信息
			const res = await getInfo();
			if (res.code === 200) {
				uni.setStorageSync('userInfo', JSON.stringify(res.user));
				uni.setStorageSync('deptId', res.dept.deptId);
				uni.switchTab({
					url: '/pages/home/index'
				});
				
			}
		},
		submit() {
			this.$refs.form
				.validate()
				.then((res) => {
					uni.removeStorageSync("Authorization");
					this.postLogin();
				})
				.catch((err) => {
					console.log('表单错误信息：', err);
				});
		},
		async postLogin() {
			const res = await postLogin({
				...this.formData,
				userType: this.userType
			});
			if (res.code == 200) {
				uni.setStorageSync('Authorization', res.token);
				uni.setStorageSync('isLogin', true);
				if (uni.getStorageSync('Authorization')) {
					this.getPath(); // 获取跳转链接
				}
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'error',
					duration: 2000
				});
			}
		}
	}
};
</script>

<style lang="scss">
.login {
	width: 100%;
	height: 100vh;
	background: linear-gradient(180deg, #cef5f0 0%, #f0faf9 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	.login-main {
		width: 453px;
		margin: 0 auto;
		h3 {
			font-size: 38px;
			width: 100%;
			text-align: center;
		}
		.welcome {
			width: 100%;
			font-size: 18px;
			text-align: center;
		}
	}

	.login-button {
		margin-top: 60px;
		background-color: #0fb09b;
		color: #fff;
	}
	.login-box {
		background-color: #fff;
		border-radius: 20px;
		margin-top: 45px;
		.content-text {
			padding: 40px;
			height: 250px;
		}
		::v-deep {
			.segmented-control__text {
				height: 54px;
				line-height: 54px;
			}
			.segmented-control__item--button {
				border: none !important;
				background: linear-gradient(180deg, #cef5f0 0%, #f0faf9 100%);
				.segmented-control__text {
					color: #cccccc !important;
				}
			}
			.segmented-control__item--button--active {
				border-bottom: none;
				background: #fff !important;

				.segmented-control__text {
					color: #0fb09b !important;
					&::after {
						//主要是这个
						content: '';
						width: 28px;
						height: 5px;
						display: block;
						margin: 0 auto;
						background-color: #0fb09b;
						border-radius: 57.252rpx;
						position: absolute;
						left: 49%;
						transform: translate(-50%, -50%);
					}
				}
			}
			.segmented-control {
				height: 54px;
				line-height: 54px;
				border-radius: 20px 20px 0 0;
			}
		}
	}
}
</style>
